<template>
    <div>
        <el-carousel :interval="4000" type="card" height="200px" align="center">
            <el-carousel-item v-for="(item,index) in items" :key="index" style="margin-top: 20px;">
                <img :src="item.url"/>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>
    import Service from '../../../common/Service';
    import {mapState} from 'vuex';

    export default {
        name: "Photo",
        data() {
            return {
                items: []
            }
        },
        computed: mapState(["user"]),
        mounted() {
            //加载轮播图的图片
            this.loadPhoto();
        },
        watch: {
            user(v, o) {
                this.loadPhoto();
            }
        },
        methods: {
            loadPhoto() {
                // 如果没有用户ID，即未登录，显示默认图片
                if (this.user.user_id === null || this.user.user_id === "") {
                    this.items = [{
                        url: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2387249991,4148685945&fm=26&gp=0.jpg"
                    }, {
                        url: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=198098317,3843373275&fm=26&gp=0.jpg"
                    }, {
                        url: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3315838951,2925046183&fm=26&gp=0.jpg"
                    }];
                    return;
                }
                Service.base.loadPhoto(this.user.user_id).then(data => {
                    this.items = [{
                        url: data[0].pic_one
                    }, {
                        url: data[0].pic_two
                    }, {
                        url: data[0].pic_three
                    }]
                })
            }
        }
    }
</script>
<style>
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
</style>
<style scoped>

</style>